<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>


        <footer th:fragment="table">
            <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

            <div id="app">
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                    <el-table-column
                            fixed
                            prop="date"
                            label="日期"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="province"
                            label="省份"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="city"
                            label="市区"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                            width="300">
                    </el-table-column>
                    <el-table-column
                            prop="zip"
                            label="邮编"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="zip"
                            label="邮编"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="zip"
                            label="邮编"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="zip"
                            label="邮编"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="zip"
                            label="邮编"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="zip"
                            label="邮编"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="zip"
                            label="邮编"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="zip"
                            label="邮编"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="zip"
                            label="邮编"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="100">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                            <el-button type="text" size="small">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!--cdn引入ElementUI组件必须先引入Vue-->
                <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
                <!-- cdn引入ElementUI组件库 -->
                <script src="https://unpkg.com/element-ui/lib/index.js"></script>
                <script type="text/javascript">
                    const vm = new Vue({ // 配置对象 options
                        // 配置选项(option)
                        el: '#app',  // element: 指定用vue来管理页面中的哪个标签区域
                        data: {
                            msg: '',
                            tableData: [{
                                date: '2016-05-02',
                                name: '王小虎',
                                province: '上海',
                                city: '普陀区',
                                address: '上海市普陀区金沙江路 1518 弄',
                                zip: 200333
                            }, {
                                date: '2016-05-04',
                                name: '王小虎',
                                province: '上海',
                                city: '普陀区',
                                address: '上海市普陀区金沙江路 1517 弄',
                                zip: 200333
                            }, {
                                date: '2016-05-01',
                                name: '王小虎',
                                province: '上海',
                                city: '普陀区',
                                address: '上海市普陀区金沙江路 1519 弄',
                                zip: 200333
                            }, {
                                date: '2016-05-03',
                                name: '王小虎',
                                province: '上海',
                                city: '普陀区',
                                address: '上海市普陀区金沙江路 1516 弄',
                                zip: 200333
                            }]
                        },
                        methods: {
                            handleClick(row) {
                                console.log(row);
                            }
                        },

                    })
                </script>

            </div>
        </footer>
    </head>
</html>